<template>
  <div id="home">
    <nav-bar>
      <template v-slot:default>图书兄弟</template>
    </nav-bar>
    <!--用来当上拉页面的时候显示，因为下面那位兄弟会被隐藏-->
    <tab-control v-show="isTabFixed" @tabClick="tabClick" :titles="['畅销','新书','精选']"></tab-control>
    <div class="wrapper">
      <div class="content">
        <!--让组合api可以访问这个dom元素-->
        <div ref="banref">
          <home-swipe :banners="banners"></home-swipe>
          <recommend-view :recommends="recommends"></recommend-view>
        </div>
        <!--子组件向父组件传递过来的事件-->
        <tab-control @tabClick="tabClick" :titles="['畅销','新书','精选']"></tab-control>
        <goods-list :goods="showGoods"></goods-list>
      </div>
    </div>
    <back-top @bTop="bTop" v-show="isTabFixed"></back-top>
  </div>
</template>

<script>
import {ref, onMounted, reactive, computed, watchEffect, nextTick} from 'vue'
import {getHomeAllData, getHomeGoods} from "@/network/home"
import NavBar from "@/components/common/navbar/NavBar"
import RecommendView from "@/views/home/chlidComps/RecommendView"
import TabControl from "@/components/content/tabControl/TabControl"
import GoodsList from "@/components/goods/GoodsList"
import BackTop from "@/components/common/backtop/BackTop";
import HomeSwipe from "@/views/home/chlidComps/HomeSwipe";
import BScroll from 'better-scroll'

export default {
  name: 'Home',
  /*执行前，DOM可能末加载完成*/
  setup() {
    let isTabFixed = ref(false)
    let banref = ref(null)
    let tmpid = ref(0)
    let banners = ref([])
    const recommends = ref([])
    const goods = reactive({
      sales: {page: 1, list: []},
      new: {page: 1, list: []},
      recommend: {page: 1, list: []}
    })
    let currentType = ref('sales')
    /*使用计算属性来切换页面*/
    const showGoods = computed(() => {
      return goods[currentType.value].list
    })
    let bscroll = reactive({})
    /*DOM加载OK了*/
    onMounted(() => {
      getHomeAllData().then(res => {
        recommends.value = res.data.goods.data
        banners.value = res.data.slides
      }).catch(err => {
      })
      getHomeGoods('sales').then(res => {
        console.log(res)
        goods.sales.list = res.data.goods.data;
      }).catch(err => {
      })
      getHomeGoods('recommend').then(res => {
        goods.recommend.list = res.data.goods.data;
      }).catch(err => {
      })
      getHomeGoods('new').then(res => {
        goods.new.list = res.data.goods.data;
      }).catch(err => {
      })
      bscroll = new BScroll(document.querySelector('.wrapper'), {
        probeType: 3, //3-只要运行就触发scroll
        click: true,//是否允许点击
        pullUpLoad: true,//上拉加载更多
      })
      bscroll.on('scroll', (position) => {
        /*! 获取dom元素的高度，从而判断其是否已经被隐藏*/
        console.log('banref:' + banref.value.offsetHeight)
        console.log('content:' + -position.y)
        isTabFixed.value = (-position.y) > banref.value.offsetHeight
      })
      bscroll.on('pullingUp', () => {
        // console.log('upupup')
        const page = goods[currentType.value].page + 1
        getHomeGoods(currentType.value, page).then(res => {
          goods[currentType.value].list.push(...res.data.goods.data)
          goods[currentType.value].page += 1
        })
        /*完成上拉-等待数据加载完成-将新数据展示出来*/
        bscroll.finishPullUp()
        /*重新计算下高度*/
        bscroll.refresh()
        // console.log('content_new_height:' + document.querySelector('.content').clientHeight)
        // console.log('current_type:' + currentType.value + ",page:" + page)
      })
    })
    const tabClick = (index) => {
      tmpid.value = index
      let types = ['sales', 'new', 'recommend']
      currentType.value = types[index]
      /*切换页面的时候也要重新计算下高度*/
      nextTick(() => {
        bscroll && bscroll.refresh()
      })
    }
    /*监听页面数据变化，数据加载完成后再计算高度*/
    watchEffect(() => {
      nextTick(() => {
        bscroll && bscroll.refresh()
      })
    })
    const bTop = () => {
      bscroll.scrollTo(0, 0, 500)
    }
    return {
      recommends, TabControl, tabClick, tmpid,
      GoodsList, goods, showGoods, banref, isTabFixed,
      bTop, banners
    }
  },
  components: {
    GoodsList,
    TabControl,
    RecommendView,
    NavBar,
    BackTop,
    HomeSwipe
  }
}
</script>
<style>
.banners img {
  width: 100%;
  height: auto;
}

#home {
  /*占据整个屏幕*/
  height: 100vh;
  /*外层相对位置，内层绝对位置，使组件可以适应不同屏幕*/
  position: relative;
}

.wrapper {
  position: absolute;
  /*顶部标题栏，别挡着了*/
  top: 45px;
  /*底部菜单栏，别挡着了*/
  bottom: 50px;
  /*居中*/
  left: 0px;
  right: 0px;
  /*超出部分隐藏*/
  overflow: hidden;
}

.content {

}
</style>
